<template>
  <van-form @submit="submit" ref="addform">
       <!-- 文章标题 -->
        <van-field
          v-model="title"
          name="用户名"
          label="文章标题"
          placeholder="请输入文章内容"
          :rules="[{ required: true, message: '请输入文章内容' }]"
        />
        <!-- 文章分类 -->
         <van-field
            readonly
            clickable
            name="picker1"
            :value="value"
            label="文章分类"
            placeholder="请选择文章分类"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns1"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

        <van-field
            readonly
            clickable
            name="picker2"
            :value="tags"
            label="文章标签"
            placeholder="请选择文章标签"
            @click="showPicker2 = true"
          />
          <van-popup  v-model="showPicker2" position="bottom">
            <!-- <div class="tags-popup">
              <h3>请选择标签</h3>
              <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
                <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
                <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
                <van-checkbox name="3" shape="square">复选框 3</van-checkbox>
                <van-checkbox name="4" shape="square">复选框 4</van-checkbox>
              </van-checkbox-group>
            </div> -->
               <van-picker
              show-toolbar
              :columns="columns2"
              @confirm="onConfirm2"
              @cancel="showPicker2 = false"
            />
          </van-popup>  
        <van-field name="uploader"  label="文件上传">
          <template #input>
            <van-uploader v-model="uploader" :after-read="afterRead" />
          </template>
        </van-field>
         <van-field
            v-model="content"
            rows="4"
            autosize
            label="文章正文"
            type="textarea"
            placeholder="请输入正文内容"
          />
          <br><br>
          <van-row type="flex" justify="space-around">
            <van-button icon="plus" type="primary" native-type="submit" @click="statusChange('2')">发布</van-button>
            <van-button icon="send-gift-o" type="info" @click="status('1')">存草稿</van-button>
            <van-button icon="revoke" type="danger" native-type="button" @click="resetForm">重置</van-button>
          </van-row>
        
        
      </van-form>
</template>

<script>
import {getIndexList} from '../api/index'
import {uploadPic} from '../api/article'
import {addArticle} from '../api/article'
export default {
  data() {
    return {
      uploader:[],
      value: '',
      tags:'',    //
      columns1: [],
      columns2: [],
      showPicker: false,
      showPicker2:false,
      checkboxGroup:[],
      content:'',        //
      title:'',          //
      uploaderPic:'',    //
      cateid:0  ,        //
      author:'' ,         // 
      status:'',
      
     }
  },
   methods: {
    resetForm(){
      console.log(1212);
      // this.$refs.addform.resetValidation()
      this.title = ''
      this.value = ''
      this.tags = ''
      this.uploaderPic = ''
      this.content = '',
      this.uploader = []
    },
    statusChange(status){
      this.status = status
    },
    onConfirm(value) {
      console.log(value);
      this.value = value;
      this.showPicker = false;
      this.columns1.forEach(item => {
        if(item.catename === value){
          this.cateid = item.id
        }
      })
    },
    onConfirm2(value) {
      // console.log(value);
      this.tags = value;
      this.showPicker2 = false;
    },
   async submit(){
    const res = await addArticle({
      author:'',
      cateid:this.cateid,
      content:this.content,
      pic:this.uploaderPic,
      status:this.status,
      tag:this.tags,
      title:this.title
})
    console.log(res);
    if(res.errno === 0){
if(this.status === '2'){
   this.$toast.success('发布成功')
}
   else if(this.status === '1')  {
     this.$toast.success('存草稿成功')
   }
    // this.$refs.resetValidation()
    this.$router.push('/user/article')
    }
    },
  async  afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      // console.log(file.content);
        const formdata = new FormData();
        formdata.append("file",file.file );
      const res = await uploadPic(formdata)
      this.uploaderPic = res.data.savePath
      // console.log(res);
      console.log(this.uploaderPic);
    },
  },
 async created(){
   const res = await getIndexList()
   console.log(res);
   res.data.allCate.forEach(item => {
    this.columns1.push(item.catename)
   });
   res.data.allTag.forEach(item => {
    this.columns2.push(item.tagname)
   });
  }
}
</script>

<style scoped lang="less">
.tags-popup{
  padding: 0 20px;
  h3{
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom:1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>